//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Buttons

//== Design Properties
//## Helper classes to change the look and feel of the component
========================================================================== */
// Color variations
.btn,
.btn-default {
    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color, $btn-default-bg-hover);
}

.btn-primary {
    @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color, $btn-primary-bg-hover);
}

.btn-inverse {
    @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border-color, $btn-inverse-bg-hover);
}

.btn-success {
    @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color, $btn-success-bg-hover);
}

.btn-info {
    @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color, $btn-info-bg-hover);
}

.btn-warning {
    @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color, $btn-warning-bg-hover);
}

.btn-danger {
    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color, $btn-danger-bg-hover);
}

// Button Sizes
.btn-lg {
    font-size: $font-size-large;
    img {
        height: calc(#{$font-size-small} + 4px);
    }
}

.btn-sm {
    font-size: $font-size-small;
    img {
        height: calc(#{$font-size-small} + 4px);
    }
}

// Button Image
.btn-image {
    padding: 0;
    vertical-align: middle;
    border-style: none;
    background-color: transparent;
    img {
        display: block; // or else the button doesn't get a width
        height: auto; // Image set height
    }
    &:hover,
    &:focus {
        background-color: transparent;
    }
}

// Icon buttons
.btn-icon {
    & > img,
    & > .glyphicon {
        margin: 0;
    }
}

.btn-icon-right {
    & > img,
    & > .glyphicon {
        float: right;
        margin-left: 5px;
    }
}

.btn-icon-top {
    padding-right: 0;
    padding-left: 0;
    & > img,
    & > .glyphicon {
        display: block;
        margin: 0 0 5px 0;
    }
}

